<script setup>
import {ref, onMounted} from 'vue';

const props = defineProps({
  // 按钮尺寸
  size: {
    type: String,
    default: 'md', // 默认中等尺寸
    validator: (value) => ['sm', 'md', 'lg'].includes(value), // 限制为 sm、md、lg
  },
});

// 点击事件
const emit = defineEmits(['click']);

// 根据尺寸设置样式
const getButtonStyle = (gradient, color) => {
  switch (props.size) {
    case 'sm':
      return {
        padding: '5px 10px',
        fontSize: '14px',
        background: gradient,
        color: color,
      };
    case 'md':
      return {
        padding: '10px 20px',
        fontSize: '16px',
        background: gradient,
        color: color,
      };
    case 'lg':
      return {
        padding: '15px 30px',
        fontSize: '18px',
        background: gradient,
        color: color,
      };
    default:
      return {
        padding: '10px 20px',
        fontSize: '16px',
        background: gradient,
        color: color,
      };
  }
};
// 预定义的背景颜色列表
const colors = [
  {gradient: 'linear-gradient(135deg, #ff416c, #ff4b2b)', color: 'white'}, // 红色
  {gradient: 'linear-gradient(135deg, #1e3c72, #2a5298)', color: 'white'}, // 蓝色
  {gradient: 'linear-gradient(135deg, #00b09b, #96c93d)', color: 'white'}, // 绿色
  {gradient: 'linear-gradient(135deg, #6a11cb, #2575fc)', color: 'white'}, // 紫色
  {gradient: 'linear-gradient(135deg, #ff9a9e, #fad0c4)', color: 'white'}, // 粉色
  {gradient: 'linear-gradient(135deg, #ff7e5f, #feb47b)', color: 'white'}, // 橙色
  {gradient: 'linear-gradient(135deg, #00cdac, #02aab0)', color: 'white'}, // 青绿色
  {gradient: 'linear-gradient(135deg, #ffd700, #daa520)', color: 'white'}, // 金色
  {gradient: 'linear-gradient(135deg, #00ffff, #00ced1)', color: 'white'}, // 青色
  {gradient: 'linear-gradient(135deg, #1a1a1a, #333333)', color: 'white'}, // 暗黑
  {gradient: 'linear-gradient(135deg, #f5f7fa, #c3cfe2)', color: '#333'}, // 明亮
];

// 随机选择一个颜色
const randomColor = ref(null);
const randomStyle = ref(null)

const getRandomColor = () => {
  const randomIndex = Math.floor(Math.random() * colors.length);
  randomColor.value = colors[randomIndex];
};

// 在组件挂载时生成随机颜色
onMounted(() => {
  getRandomColor();
  randomStyle.value = getButtonStyle(randomColor.value.gradient, randomColor.value.color);
});
</script>

<template>
  <button
      class="btn-random"
      :style="randomStyle"
      @click.stop="emit('click')"
  >
    <slot></slot>
  </button>
</template>

<style scoped>
.btn-random {
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s ease;
}

.btn-random:hover {
  opacity: 0.9;
}
</style>